<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 2</title>
</head>
<body>

    <div id="app">

        <div v-if="show">Hello</div>

        <div v-if="score < 60">不及格</div>
        <div v-else-if="score <= 90">良好</div>
        <div v-else>优秀</div>

        <div>
            <input type="number"  v-model.number="score">
        </div>

        <div>
            <input type="radio" value="男" v-model="sex"> 男
            <input type="radio" value="女" v-model="sex"> 女
        </div>

        <div>
            你选择的性别为：{{sex}}
        </div>

        <div>
            <select v-model="color">
                <option value="红色">红色</option>
                <option value="绿色">绿色</option>
                <option value="蓝色">蓝色</option>
            </select>
        </div>

        <div>
            你选择的颜色为：{{color}}
        </div>

        <div>
            <input type="checkbox" value="苹果" v-model="fruit"> 苹果
            <input type="checkbox" value="橘子" v-model="fruit"> 橘子
            <input type="checkbox" value="葡萄" v-model="fruit"> 葡萄
        </div>

        <div>
            你选择的水果为：{{fruit}}
        </div>

    </div>

    <script src="js/vue.min.js"></script>
    <script>

        new Vue({
            el: '#app',
            data: {
                show: true,
                score: 20,
                sex: '',
                color: '',
                fruit: []
            },
            methods: {

            }
        });
    </script>
</body>
</html>